<template>
  <!-- （渲染问题） -->
  <div class="technicSearch">
    <!-- 头部导航栏 -->
    <van-nav-bar title="面试技巧搜索" left-arrow @click-left="$router.back()" />
    <!-- 搜索模块 -->
    <div class="search">
      <van-search
        shape="round"
        v-model="value"
        placeholder="请输入搜索关键词"
        ref="input"
        autofocus
        show-action
        @search="onSearch"
        @cancel="onCancel"
      />
    </div>
    <!-- 搜索结果模块 -->
    <div v-if="showtechnicList">
      <div class="content" v-for="(item, index) in technicList" :key="item.id">
        <div class="left">
          <p
            @click="$router.push({ path: '/details', query: { id: item.id } })"
          >
            {{ item.title }}
          </p>
          <div class="bottom">
            <span class="time">{{ item.updated_at | technicTime }}</span>
            <span class="watch"
              ><van-icon name="browsing-history-o" />{{ item.read }}</span
            >
            <span :class="{ star: true }" @click="onstar(index)"
              ><van-icon name="good-job-o" />{{ item.star }}</span
            >
          </div>
        </div>
        <div class="right">
          <van-image
            width="113"
            height="75"
            :src="`http://119.91.151.46:1337${item.cover}`"
            radius="5px"
            fit="cover"
          />
        </div>
      </div>
    </div>
    <!-- 大家都在搜模块 -->
    <div v-else>
      <div class="hotSearch">
        <p>大家都在搜</p>
        <div class="hotTag">
          <van-tag
            color="#eceaea"
            class="tag"
            size="large"
            v-for="(item, index) in hotSearch"
            :key="index"
            @click="onhotSearch(item)"
            >{{ hotSearch[index] }}</van-tag
          >
        </div>
      </div>
      <!-- 历史搜索 -->
      <div class="historySearch">
        <van-nav-bar
          left-text="历史搜索"
          right-text="清空"
          @click-right="clearHistory"
        />
        <div class="historyTag">
          <van-tag
            v-for="(item, index) in history"
            :key="index"
            color="#eceaea"
            @click="onhistory(item)"
            class="tag"
            size="large"
            >{{ history[index] }}</van-tag
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { getTechnicListAPI, getTechnicTopSearchAPI } from '@/api/find.js'
moment.locale('zh-cn')

export default {
  data () {
    return {
      value: '',
      technicList: [],
      showtechnicList: false,
      hotSearch: [],
      history: []
    }
  },
  methods: {
    clearHistory () {
      this.history = []
    },
    async onSearch () {
      this.showtechnicList = true
      // console.log(this.value)
      const res = await getTechnicListAPI({ q: this.value })
      // console.log(res)
      this.technicList = res.data.data.list
      this.history.push(this.value)
    },
    onCancel () {
      this.showtechnicList = false
    },
    // 点击热搜标签搜索
    async onhotSearch (value) {
      this.showtechnicList = true
      this.value = value
      // console.log(this.value)
      const res = await getTechnicListAPI({ q: value })
      // console.log(res)
      this.technicList = res.data.data.list
      this.history.push(value)
    },
    // 点击历史搜索模块
    async onhistory (value) {
      this.showtechnicList = true
      this.value = value
      // console.log(this.value)
      const res = await getTechnicListAPI({ q: value })
      // console.log(res)
      this.technicList = res.data.data.list
      this.history.push(value)
    }
  },
  async created () {
    // 获取面试技巧列表
    const res = await getTechnicListAPI()
    // console.log(res)
    this.technicList = res.data.data.list
    // 面试技巧热搜
    const hotSearch = await getTechnicTopSearchAPI()
    console.log(hotSearch)
    this.hotSearch = hotSearch.data.data
  },
  filters: {
    // 面试技巧模块发布时间过滤器
    technicTime: function (value) {
      return moment(value).fromNow()
    }
  }
}
</script>

<style lang="less">
.technicSearch {
  .content {
    display: flex;
    justify-content: space-between;
    margin: 30px 0;
    height: 75px;
    .left {
      display: flex;
      margin-left: 10px;
      flex-direction: column;
      justify-content: space-between;
      .time {
        display: inline-block;
        width: 130px;
      }
      .watch {
        display: inline-block;
        width: 80px;
      }
      p {
        margin-top: 0;
        font-size: 16px;
      }
      .bottom {
        font-size: 12px;
        margin-bottom: 4px;
      }
    }
    .right {
      height: 75px;
      width: 113px;
      border-radius: 5px;
      margin-right: 10px;
    }
  }
  // 热搜模块
  .hotSearch {
    p {
      margin: 15px 0 0;
      font-weight: 500;
      font-size: 16px;
      padding-left: 15px;
    }
    // 热搜tag标签
    .hotTag {
      .tag {
        margin: 10px;
        color: #545671;
      }
    }
  }
  .historySearch {
    margin-top: 20px;
    .van-nav-bar__left {
      .van-nav-bar__text {
        color: #222222;
        font-size: 16px;
        font-weight: 500;
      }
    }
    .van-nav-bar__right {
      .van-nav-bar__text {
        color: #545671;
        font-size: 12px;
        font-weight: 400;
      }
    }
    .historyTag {
      .tag {
        margin: 10px;
        color: #545671;
      }
    }
  }
}
</style>
